<template>
  <div class="index">
    <div class="top">
      <div class="header">
        <div class="input_box">
            <div class="search_box">
                <image class="search" src="/static/images/sousuo.png" alt=""/>
                <input type="text" placeholder="搜索" placeholder-style="color:#fff;font-size:24rpx">
            </div>    
            <button open-type="share">
                <image class="header_r" src="/static/images/my_sharing.png" alt=""/> 
            </button>
              
          </div>
      </div>
      <div class="nav">
        <div class="nav_box" v-for="(nav,nav_id) in navlist" :key="nav_id" @click="upDown(nav_id)">
          <div class="navlist">{{nav.title}}</div>
          <image class="nav_img" v-if="nav_id==3?true:false" :src="rex==0?'/static/images/jg_moren.png':rex==1?'/static/images/jg_shang.png':rex==2?'/static/images/jg_xia.png':''" alt=""/>   
        </div>
      </div>
    </div>
    
    <div class="content">
        <div class="list" v-for="(item,index) in list" :key="index">
            <image class="list_img" :src="item.img" alt=""  @click="shop_details(index)"/> 
            <div class="list_title">{{item.title}}</div>  
            <div class="list_b">
                <div class="list_price">¥{{item.price}}</div>
                <image :src="item.fabulous==0?'/static/images/aixin.png':'/static/images/my_love_xuan.png'" alt="" @click="heart(index)"/> 
            </div>
        </div>
    </div>
    <div style="width:100%;height:100rpx;background:#f5f5f5"></div>
     <vue-tab-bar  @fetch-index="clickIndexNav" :selectNavIndex=0 :needButton="needButton" :handButton="handButton" :btnText="btnText"></vue-tab-bar>
  </div>
</template>

<script>
import vueTabBar from '../../components/tabber/index'
export default {
  components:{
    vueTabBar
  },
  data () {
    return {
        navlist:[{title:'推荐'},{title:'新品'},{title:'销量'},{title:'价格'}],
        rex:0,
        nex:-1,
        list:[
          {img:'/static/images/img.png',title:'童装女童套装儿童春装牛儿童春装牛',price:'24.00',fabulous:0},
          {img:'/static/images/img.png',title:'童装女童套装儿童春装牛儿童春装牛',price:'24.00',fabulous:1},
          {img:'/static/images/img.png',title:'童装女童套装儿童春装牛儿童春装牛',price:'24.00',fabulous:0},
          {img:'/static/images/img.png',title:'童装女童套装儿童春装牛儿童春装牛',price:'24.00',fabulous:0},
          {img:'/static/images/img.png',title:'童装女童套装儿童春装牛儿童春装牛',price:'24.00',fabulous:0},
          {img:'/static/images/img.png',title:'童装女童套装儿童春装牛儿童春装牛',price:'24.00',fabulous:0},
          {img:'/static/images/img.png',title:'童装女童套装儿童春装牛儿童春装牛',price:'24.00',fabulous:0},
          {img:'/static/images/img.png',title:'童装女童套装儿童春装牛儿童春装牛',price:'24.00',fabulous:0},
          {img:'/static/images/img.png',title:'童装女童套装儿童春装牛儿童春装牛',price:'24.00',fabulous:0},
          {img:'/static/images/img.png',title:'童装女童套装儿童春装牛儿童春装牛',price:'24.00',fabulous:0},
        ]
    }
  },
  methods: {
      upDown(id){
        switch (id) {
          case 3:
            if(this.rex==0){
              this.rex=1
            }else if(this.rex==1){
              this.rex=2
            }else if(this.rex==2){
              this.rex=1
            }
            break;
        
          default:
            break;
        }
      },
      shop_details(id){
          wx.navigateTo({ 
            url: '/pages/shop_details/main?id='+id
          })
      },
      heart(id){
        // console.log(e)
        console.log(id)
        if(this.list[id].fabulous==0){
          this.list[id].fabulous=1
        }else{
          this.list[id].fabulous=0
        }
        // let tmp = this.list.map((item,index)=>{
        //   if(id == index){
        //     if(item.heart_id){
        //       item.active = true;

        //     }else{
        //       item.active = true;
        //     }
        //   } 
        //  return item; 
        // })
        // this.list = tmp
        // console.log(this.list)
  
      }
  },
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
    }
    return {
      title: '转发',
      path: '/pages/index/index',
      success: function (res) {
        console.log('成功', res)
      }
    }
  },
  created () {
    // let app = getApp()
   
  },
  onLoad(){
    var that = this
    console.log(that.globalData.openid,'onLoad')
    wx.getSetting({
      success(res) {
          if(!res.authSetting['scope.userInfo']){
            wx.redirectTo({
              url:'/pages/login/main'
            })
          }else{
            that.$http.post({
              url: '/webapi/product/productList',
              data: {
                num: 1,
                size:10,
                userId:1
              }
            }).then(res => {
              console.log(res)
            })
          }
        }
    })
  },
  onShow(){
    // var that = this
    // that.globalData.loginId = 1
    // console.log(that.globalData.openid,'onshow')
    // wx.getSystemInfo({
    //   success (res) {
    //     console.log(res)
    //     that.statusBarHeight = res.statusBarHeight*2
    //     that.platform = res.platform
    //     let platformReg = /ios/i;
    //     if (platformReg.test(that.platform)) {
    //         that.titleBarHeight = 88;
    //     } else {
    //         that.titleBarHeight = 96;
    //     }
    //     that.navBarHeight = that.statusBarHeight + that.titleBarHeight;
    //     console.log(that.navBarHeight)
    //   }
    // })
    
  },
  mounted() {

  } 
}
</script>

<style scoped lang="less">
  .index{
    width: 100%;
    height: 100%;
    // position: absolute;
    background: #f5f5f5;
    .top{
     position: fixed;
     top: 0;
     width: 100%;
     background:#f5f5f5;  
      .header{
        width: 100%;
        height: 50rpx;
        margin-top: 20rpx; 
        .input_box{
          padding: 0rpx 28rpx 0rpx 52rpx;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #333;
          font-size: 28rpx;
          .search_box{
              display: flex;
              align-items: center;
              width:584rpx;
              height:50rpx;
              background:rgba(204,204,204,1);
              border-radius:26rpx;
              padding-left: 20rpx;
              box-sizing: border-box;
            .search{
              width: 28rpx;
              height: 28rpx;
              margin-right: 20rpx;
            }
            input{

            }
          }
          button{
            background-color: #f5f5f5;
            .header_r{
                width: 36rpx;
                height: 38rpx;
              }
          }
          button::after { border: none; }
          
        }
      }
      .nav{
        margin: 30rpx 0 20rpx 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 100rpx;
        padding-right: 100rpx;
        box-sizing: border-box;
        color: #666;
        font-size: 28rpx;
        
        .nav_box{
          display: flex;
          align-items: center;
          justify-content: space-between;
          .nav_img{
            margin-left: 14rpx;
            width: 14rpx;
            height: 20rpx;
          }
        }   
      }
    }
    
    .content{
      margin-top: 150rpx;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 28rpx;
       box-sizing: border-box;
      .list{
        width: 340rpx;
        height: 464rpx;
        display: flex;
        flex-direction: column;
        background: #fff;
        color: #8E8E93;
        font-size: 26rpx;
        .list_img{
          width: 340rpx;
          height: 330rpx;
        }
        .list_title{
          margin: 24rpx 0 20rpx 0;
          padding: 0 36rpx 0 8rpx;
          box-sizing: border-box;
          overflow:hidden;
          text-overflow: ellipsis;//显示省略号
          display:-webkit-box;
          -webkit-line-clamp:1;//块元素显示的文本行数
          -webkit-box-orient:vertical;
        }
        .list_b{
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 20rpx 0 10rpx;
          image{
            width: 32rpx;
            height: 28rpx;
          }
        }
      }
    }
  }
 
</style>
